<!-- 添加/编辑 收件地址-->
<template>
	<div class="add-address-panel">
		<nav-bar :back="1" :title="id > 0 ? '编辑地址' : '新增收件地址'" :rollback="rollbackIntercept"></nav-bar>
		<div class="add-address">
			<van-form @submit="onSubmit">
				<van-field v-model="addressInfo.linkman" name="linkman" label="联系人：" placeholder="请输入收件联系人"
					:rules="linkman_rules" clearable maxlength="10" @input="setLinkman($event)"></van-field>
				<van-field v-model="addressInfo.mobile" name="mobile" label="手机号码：" placeholder="请输入11位手机号码"
					:rules="mobile_rules" clearable maxlength="11" type="tel"></van-field>
				<div class="provinces-picker" @click="pickerSwitch">
					<van-field v-model="addressInfo.province.value" name="province" label="选择地区："
						placeholder="请选择所在省、市、区" :rules="province_rules" readonly class="limit-one-line">
					</van-field>
					<div class="arrowsRight">
						<van-image width="100%" height="100%" :src="require('../../assets/imgs/arrowsRight.png')">
						</van-image>
					</div>
				</div>
				<van-field v-model="addressInfo.address" name="address" label="详细地址：" placeholder="请输入详细地址：如道路、单元、门牌等"
					:rules="address_rules" clearable maxlength="100" type="textarea"></van-field>
				<!-- <van-field
					v-model="addressInfo.postalCode"
					name="postalCode"
					label="邮政编码："
					placeholder="请输入邮政编码"
					:rules="postalCode_rules"
					clearable
					maxlength="20"
					type="number"
				></van-field> -->
				<div class="addAddress-btn">
					<button class="btn main-btn" round block type="info" native-type="submit">
						保存地址
					</button>
					<div v-if="this.id > 0" class="btn" @click="deleteAddress">
						删除地址
					</div>
				</div>
			</van-form>
		</div>
		<ProvincesPicker :show="showPicker" :pickerSwitch="pickerPickerSwitch" :selectResult="selectResult">
		</ProvincesPicker>
	</div>
</template>

<script>
	import {
		Toast,
		Dialog
	} from 'vant'

	import NavBar from '../../components/NavBar.vue'
	import ProvincesPicker from '../../components/ProvincesPicker.vue'

	import {
		address_api
	} from '../../api/index.js'

	export default {
		name: 'addressedit',
		components: {
			NavBar,
			ProvincesPicker,
		},
		data() {
			return {
				showPicker: false,
				linkman_rules: [{
					required: true,
					message: '请输入收件联系人',
				}],
				mobile_rules: [{
					validator: (value) => {
						return /^1[3|4|5|8|7|9][0-9]\d{8}$/.test(value)
					},
					message: '请输入正确的11位手机号码',
				}],
				province_rules: [{
					required: true,
					message: '请选择所在省、市、区',
				}],
				address_rules: [{
					required: true,
					message: '请输入详细地址：如道路、单元、门牌等',
				}],
				postalCode_rules: [{
					validator: (value) => {
						return /^[1-9]\d{5}$/.test(value)
					},
					message: '请输入正确邮政编码',
				}],
				address: {},
				is_alter: false,
			}
		},
		methods: {
			rollback() {
				this.$router.back(-1)
			},
			rollbackIntercept() {
				//回退拦截
				Dialog.confirm({
						width: '5.4rem',
						title: '确认退出',
						message: '你确定放弃设置直接退出吗',
						confirmButtonText: '确定',
						confirmButtonColor: '#F7383C',
						cancelButtonText: '我再想想',
						cancelButtonColor: '#666666',
					})
					.then(() => {
						this.rollback()
					})
					.catch(() => {
						// on cancel
					})
			},
			setLinkman(value) {
				let addressInfo = this.addressInfo
				addressInfo.linkman = value
				this.addressInfo = addressInfo
			},
			pickerPickerSwitch() {
				this.showPicker = false
			},
			pickerSwitch() {
				this.showPicker = !this.showPicker
			},
			selectResult(result) {
				this.pickerSwitch()
				let addressInfo = this.addressInfo
				addressInfo.province = result
				this.addressInfo = addressInfo
			},
			//手机号码校验
			validator(value) {
				return /^1[3|4|5|8|7|9][0-9]\d{4,8}$/.test(value)
			},
			validator2(value) {
				return /^[1-9]\\d{5}$/.test(value)
			},
			//提交表单
			onSubmit(values) {
				console.log('submit', values)
				let data = {
					Id: this.id, //0新增，大于0编辑
					ReceivingName: values.linkman, //收货人
					MobileNo: values.mobile, //手机号
					Province: this.addressInfo.province.Ids[0], //省
					City: this.addressInfo.province.Ids[1], //市
					District: this.addressInfo.province.Ids[2], //区
					CAddress: values.address, //收货地址
					IsDefault: 0, //是否默认地址
					AddressType: 0, //0 家， 1 公司， 2 学校
				}
				address_api.saveUserReceivingAddress(data, (res) => {
					console.log(res)
					if (this.id > 0) {
						Toast('修改成功')
					} else {
						Toast('添加成功')
					}
					setTimeout(() => {
						this.rollback()
					}, 1000)
				})
			},
			deleteAddress() {
				console.log('删除地址')
				Dialog.confirm({
						width: '5.4rem',
						title: '确认删除',
						message: '你确定删除该收货地址吗',
						className: '.dialog-box',
						confirmButtonText: '确定',
						confirmButtonColor: '#F7383C',
						cancelButtonText: '我再想想',
						cancelButtonColor: '#666666',
					})
					.then(() => {
						let data = {
							id: this.id,
						}
						address_api.delUserReceivingAddress(data, (res) => {
							console.log(res)
							Toast('删除成功')
							setTimeout(() => {
								this.rollback()
							}, 1000)
						})
					})
					.catch(() => {
						// on cancel
					})
			},
		},
		computed: {
			addressInfo: {
				get() {
					if (this.is_alter) {
						return this.address
					} else {
						return this.params
					}
				},
				set(data) {
					this.is_alter = true
					this.address = data
					console.log(data)
					// this.addressInfo = data
				},
			},
			params() {
				if (this.$route.params.address) {
					return this.$route.params.address
				} else if (window.localStorage.getItem('params')) {
					return JSON.parse(window.localStorage.getItem('params')).address
				} else {
					return {
						linkman: '',
						mobile: '',
						province: {
							value: '',
							Ids: [],
						},
						address: '',
						// postalCode: '',
					}
				}
			},
			id() {
				if (this.$route.params.id) {
					return this.$route.params.id
				} else if (window.localStorage.getItem('params')) {
					return JSON.parse(window.localStorage.getItem('params')).id
				} else {
					return 0
				}
			},
		},
	}
</script>

<style>
	.van-field__label {
		width: 1.6rem;
		margin: 0;

		font-size: 0.28rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
	}

	/* 提示框 */
	.van-dialog__header {
		padding-top: 0.78rem;
		font-weight: 600;
		font-size: 0.32rem;
		line-height: 0.4rem;
		text-align: center;
	}

	.van-dialog__message {
		font-size: 0.28rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 0.4rem;
		padding: 0.48rem 0.4rem 0.6rem;
	}
</style>

<style scoped>
	.add-address-panel {
		width: 100%;
		height: 100%;
		padding-top: 0.88rem;
		background-color: #f6f5fb;
	}

	.add-address {
		min-height: calc(100vh - 0.88rem);
	}

	.provinces-picker {
		position: relative;
	}

	.arrowsRight {
		position: absolute;
		width: 0.14rem;
		height: 0.28rem;

		top: calc(50% - 0.14rem);
		right: 0.3rem;
	}

	.addAddress-btn {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		padding-bottom: constant(safe-area-inset-bottom);
	}

	.btn {
		margin-bottom: 0.3rem;
	}
</style>
